<template>
  <el-container class="comment-edit">
    <el-main>
      <div class="comment-wrap">
        <div class="news-box sa-row-between sa-flex-wrap">
          <div class="evaluate">
            <div class="evaluate-title sa-m-b-12">评价信息</div>
            <div class="sa-flex">
              <div>用户昵称：</div>
              <div class="color-primary" v-if="commentList.data.user.nickname">
                {{ commentList.data.user.nickname }}
              </div>
            </div>
            <div class="sa-flex">
              <div>评价星级：</div>
              <el-rate v-model="commentList.data.level" disabled />
            </div>
            <div class="custom-content">
              <div class="form-no-asterisk sa-flex">
                <div>显示状态：</div>
                <el-radio-group v-model="commentList.data.status" @change="changeStatus">
                  <el-radio label="normal" :disabled="!checkAuth('shop.admin.goods.comment.edit')"
                    >正常</el-radio
                  >
                  <el-radio label="hidden" :disabled="!checkAuth('shop.admin.goods.comment.edit')"
                    >隐藏</el-radio
                  >
                </el-radio-group>
              </div>
            </div>
          </div>
          <div class="goods" v-if="commentList.data.order_item">
            <div class="goods-title sa-m-b-12">商品信息</div>
            <div class="sa-flex">
              <sa-preview :url="commentList.data.order_item.goods_image" size="64"></sa-preview>
              <div class="sa-m-l-8">
                <div class="color-primary goods-des sa-line-1 sa-m-b-8">
                  {{ commentList.data.order_item.goods_title }}
                </div>
                <div class="sa-flex sa-m-b-16">
                  <div>单价：</div>
                  <div>{{ commentList.data.order_item.goods_price }}</div>
                  <div>×{{ commentList.data.order_item.goods_num }}</div>
                </div>
                <div class="sa-flex" v-if="commentList.data.order_item.goods_sku_text">
                  <div>规格：</div>
                  <div>{{ commentList.data.order_item.goods_sku_text }},</div>
                </div>
              </div>
            </div>
          </div>
          <div class="goods" v-else-if="commentList.data.goods">
            <div class="goods-title sa-m-b-12">商品信息</div>
            <div class="sa-flex">
              <sa-preview :url="commentList.data.goods.image" size="64"></sa-preview>
              <div class="sa-m-l-8">
                <div class="color-primary goods-des sa-line-1 sa-m-b-8">
                  {{ commentList.data.goods.title }}
                </div>
                <div class="sa-flex sa-m-b-16">
                  <div>单价：</div>
                  <div>{{ commentList.data.goods.price[0] }} x1</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="record-box sa-m-t-32 sa-m-l-20 sa-m-r-20">
          <div class="sa-flex sa-row-between sa-m-b-16">
            <div class="record-title">评价记录</div>
            <el-button
              v-auth="'shop.admin.goods.comment.reply'"
              type="primary"
              class="is-link"
              @click="editRow(commentList.data.id)"
              v-if="!commentList.data.reply_time"
              >点击回复</el-button
            >
          </div>
          <div class="user admin sa-p-b-24" v-if="commentList.data.admin">
            <div class="user-avatar sa-m-r-12">
              <sa-preview :url="commentList.data.admin.avatar" size="48"></sa-preview>
            </div>
            <div>
              <div class="sa-m-b-4 nickname">{{ commentList.data.admin.nickname }}</div>
              <div class="sa-m-b-8 reply-time">{{ commentList.data.reply_time }}</div>
              <div class="sa-m-b-8 content-title">{{ commentList.data.reply_content }}</div>
            </div>
          </div>
          <div class="user sa-m-t-24">
            <div class="user-avatar sa-m-r-12">
              <sa-preview :url="commentList.data.user.avatar" size="48"></sa-preview>
            </div>
            <div>
              <div class="sa-m-b-4 nickname">{{ commentList.data.user.nickname }}</div>
              <div class="sa-m-b-8 reply-time">{{ commentList.data.create_time }}</div>
              <div class="sa-m-b-8 content-title">{{ commentList.data.content }}</div>
              <sa-preview :url="commentList.data.images" size="48"></sa-preview>
            </div>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>
<script setup>
  import { onMounted, reactive } from 'vue';
  import { api } from '../goods.service';
  import { useModal } from '@/sheep/hooks';
  import CommentReply from './reply.vue';
  import { checkAuth } from '@/sheep/directives/auth';

  const emit = defineEmits(['modalCallBack']);
  const props = defineProps(['modal']);
  const commentList = reactive({
    data: {
      level: 0,
      title: '',
      user: {},
      admin: {},
      id: 0,
      reply_time: '',
      reply_content: '',
      order_item: {},
      create_time: '',
      content: '',
      images: [],
      status: '',
    },
  });
  async function getDetail() {
    const { error, data } = await api.comment.detail(props.modal.params.id);
    error === 0 && (commentList.data = data);
  }
  async function changeStatus(e) {
    await api.comment.edit(props.modal.params.id, {
      status: e,
    });
    emit('modalCallBack', {
      event: 'confirm',
    });
  }
  function editRow(row) {
    useModal(
      CommentReply,
      {
        title: '回复买家',
        type: 'edit',
        id: row,
      },
      {
        confirm: () => {
          getDetail();
        },
      },
    );
  }
  onMounted(() => {
    getDetail();
  });
</script>
<style lang="scss" scoped>
  .comment-wrap {
    font-size: 12px;
    color: #8c8c8c;
    .news-box {
      width: 100%;
      background: var(--sa-table-header-bg);
      padding: 20px 24px;

      display: flex;
      .evaluate {
        .evaluate-title {
          font-size: 14px;
          line-height: 18px;
          font-weight: 500;
          color: var(--sa-title);
        }
      }
      .goods {
        .goods-title {
          font-size: 14px;
          line-height: 18px;
          font-weight: 500;
          color: var(--sa-title);
        }
        .goods-des {
          width: 220px;
        }
      }
    }
    .record-box {
      .record-title {
        font-weight: 500;
        font-size: 16px;
        line-height: 16px;
        color: var(--sa-subtitle);
      }
      .user {
        display: flex;
      }
      .admin {
        border-bottom: 1px solid var(--sa-space);
      }
    }
    .color-primary {
      color: var(--el-color-primary);
    }
  }
  .nickname {
    font-weight: 500;
    font-size: 12px;
    color: var(--sa-subfont);
  }
  .reply-time {
    font-weight: 400;
    font-size: 12px;
    color: var(--sa-subfont);
  }
  .content-title {
    color: var(--sa-subtitle);
    font-weight: 500;
    font-size: 12px;
  }

  :deep() {
    .el-form-item__label {
      font-size: 12px;
      color: #8c8c8c;
    }
    .el-form-item__content {
      margin-left: 0 !important;
    }
    .el-form-item {
      margin-bottom: 0;
    }
    .el-radio {
      height: 16px;
    }
    .user-avatar {
      .el-image {
        border-radius: 24px !important;
      }
    }
  }
</style>
